<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Introductions &mdash; ESL101 | OUWA</title>
  <link rel="stylesheet" type="text/css" href="/css/reset.css">
  <link rel="stylesheet" type="text/css" href="/css/video.3.css">
  <link rel="stylesheet" type="text/css" href="/css/mediaelementplayer.css">
  <script type="text/javascript" src="/js/jquery.js"></script>
  <script type="text/javascript" src="/js/mediaelement-and-player.js"></script>
  <script type="text/javascript" src="/js/popcorn.js"></script>
  <script type="text/javascript" src="/js/popcorn.image.js"></script>
  <!-- <script type="text/javascript" src="http://connect.facebook.net/en_US/all.js#appId=193851800651213&amp;xfbml=1"></script> -->
  <script type="text/javascript">
    var currentStage = parseInt(localStorage.currentStage) || 0;
    $(function() {
      $.getJSON("/esl101/1.json", function(data) {
        var stage = data.stages[currentStage];
        // generate outline
        for (i=0; i<data.stages.length; i++) {
          $("#sidebar > ol").append("<li>" + data.stages[i].stageTitle + "</li>");
        }
        // generate video - implement switch that checks stage type first
        for (videoType in stage.video.src) {
          switch (videoType) {
            case "mp4":
              typeString = "video/mp4; codecs=\"avc1.42E01E, mp4a.40.2\"";
              break;
            case "webm":
              typeString = "video/webm; codecs=\"vp8, vorbis\"";
              break;
            case "ogg":
              typeString = "video/ogg; codecs=\"theora, vorbis\"";
              break;
            default:
              typeString = "";
          }
          $("#lectureVideo").append("<source src=\'" + stage.video.src[videoType] + "\' type=\'" + typeString + "\'>");
        }
        if (stage.video.subtitles) {
          for (lang in stage.video.subtitles) {
            $("#lectureVideo").append("<track kind='subtitles' src='" + stage.video.subtitles[lang] + "' srclang='" + lang + "'>");
          }
        }
        $("#lectureVideo").mediaelementplayer({
          videoWidth: $("#video").width(),
          videoHeight: 0.5625 * $("#video").width(),
          startLanguage: "en"
        });
        if (stage.slides) {
          if (stage.slidesPlaceholder) {
            $("div#slidesPlaceholder").append("<img src=\'" + stage.slidesPlaceholder + "\'>");
          }
          var popcorn = Popcorn("#lectureVideo").listen("play", function() {
            $("div#slidesPlaceholder").remove();
          }).listen("ended", function() {
            localStorage.currentStage = (++currentStage).toString();
            localStorage.lastModified = (new Date()).toUTCString();
            alert("Next stage:" + currentStage);
          });
          for (i=0; i<stage.slides.length; i++) {
            popcorn.image({
              start: stage.slides[i].start,
              end: stage.slides[i].end,
              src: stage.slides[i].src,
              target: "slides"
            });
          }
        }
      });
      // $("section#facebook").html('<h2 style="display: none;">Facebook</h2><div id="fb-root"></div><fb:comments href="' + window.location + '" num_posts="10" width="' + ($("div#rightColumn").width() - 20).toString() + '"></fb:comments>');
    });
    $(window).resize(function() {
      $("div.mejs-container").css("height", 0.5625 * $("div.mejs-container").width() + "px");
      $("div.mejs-layers > div").css("height", 0.5625 * $("div.mejs-container").width() + "px");
    });
  </script>
</head>
<body>
  <header>
    <div class="left">
      <div id="ouwaTitle">
        <img src="/files/ouwa.png" alt="OUWA">
        <h1>OUWA</h1>
      </div>
      <div id="courseTitle">
        <h1>ESL101</h1>
      </div>
      <div id="lectureTitle">
        <h1>Introductions</h1>
      </div>
      <!-- <nav>
        <h1>Site Navigation</h1>
        <ul>
          <li>Dashboard</li>
          <li>Course 1</li>
          <li>Course 2</li>
          <li>Course 3</li>
          <li>Course 4</li>
          <li>Course 5</li>
        </ul>
      </nav> -->
    </div>
    <div class="right">
      <ul>
        <li>X <!-- Offline? --></li>
        <li><img src="/css/mail.png" style="width: 24px; position: relative; top: 5px;"></li>
        <li>X <!-- Facebook --></li>
        <li><img src="/css/help.png" style="width: 24px; position: relative; top: 8px;"></li>
        <li style="width: auto; padding: 0 10px;">Liza Ng (Sign Out)</li>
      </ul>
    </div>
  </header>
  <div id="sidebar">
    <ol></ol>
  </div>
  <article>
    <div class="left">
      <section id="video">
        <h2>Video</h2>
        <video id="lectureVideo" preload="preload">
          <!-- <object type="application/x-shockwave-flash" data="flashmediaelement.swf">
            <param name="movie" value="flashmediaelement.swf">
            <param name="flashvars" value="controls=true&amp;file=/files/gettingstartedonenglish/hello.mp4">
            <img src="" width="320" height="240" title="No video playback capabilities">
          </object> -->
        </video>
      </section>
      <section id="notes">
        <h2>Notes</h2>
        <textarea>I am taking notes for this class.</textarea>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </section>
    </div>
    <div class="right">
      <section id="slides">
        <h2>Slides</h2>
        <div id="slidesPlaceholder"></div>
      </section>
      <section id="facebook">
      </section>
    </div>
    <div class="clear"></div>
  </article>
</body>
</html>